import RndModule from '@/Editor/components/RndModule';
import React from 'react';
import { getModuleIdentifier, Identifier } from '../utils/getModuleIdentifier';
import { IModuleData } from './moduleClass';

export interface ViewProps {
  moduleData: IModuleData;
}

const View: React.FC<ViewProps> = ({ moduleData }) => {
  const {
    lineWidth,
    lineType,
    fillColor,
    children: moduleDataList,
  } = moduleData.props;

  return (
    <div
      {...getModuleIdentifier(moduleData, Identifier.View)}
      style={{
        width: '100%',
        height: '100%',
        border: `${lineWidth}pt ${lineType} black`,
        backgroundColor: fillColor || 'transparent',
      }}
    >
      {/* 绘制所有的组件 start */}
      {moduleDataList?.map((moduleData) => {
        return <RndModule moduleData={moduleData} key={moduleData.id} />;
      })}
      {/* 绘制所有的组件 end */}
    </div>
  );
};

export default View;
